<style scoped lang="less"></style>
<template>
  <div class="video-list flex wrap" v-if="isNormalVideo">
    <div
      v-if="videoList.length == 1"
      class="flex-1"
      :style="{
        width: this.videoWidth + 'px',
        height: this.videoHeight + 'px',
      }"
    >
      <livePlayer
        v-for="(item, index) in videoList"
        :key="index"
        :options="item"
        :initRender="true"
        :number="number"
      ></livePlayer>
    </div>
    <template v-else-if="videoList.length > 1">
      <div
        class="video-item"
        v-for="(item, index) in videoList"
        :key="index"
        :style="{
          width: this.videoWidth + 'px',
          height: this.videoHeight + 'px',
        }"
      >
        <livePlayer
          :src="item"
          :index="index"
          :options="item"
          :initRender="true"
        ></livePlayer>
      </div>
    </template>
    <p class="data-none" v-else-if="!loading">暂无监控视频</p>
  </div>
  <div
    id="videoControl"
    class="video-control"
    :style="{
      width: videoWidth + 'px',
      height: videoHeight + 'px',
      margin: '0 auto',
    }"
    v-else
  ></div>
</template>
<script>
import livePlayer from "@/components/screenVideoPlayer/player";
export default {
  name: "deviceVideo",
  components: {
    livePlayer,
  },
  props: {
    scale: {
      type: Number,
      default: 1,
    },
    id: {
      // 设备ID
      type: String,
      default: "",
    },
    productId: {
      // 产品ID
      type: String,
      default: "",
    },
    number: {
      // 设备号
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: true,
      videoList: [],
      videoWidth: 100,
      videoHeight: 100,
      number1: "0",
      deviceDetail: {},
    };
  },
  computed: {
    isNormalVideo() {
      return true;
      return (
        this.productId != "6001" &&
        this.productId != "6002" &&
        this.productId != "6003" &&
        this.productId != "6014" &&
        this.productId != "6011"
      );
    },
  },
  created() {
    this.videoWidth = 950 * this.scale;
    this.videoHeight = 600 * this.scale;
    if (this.isNormalVideo) {
      this.getData();
    }
  },
  mounted() {
    if (!this.isNormalVideo) {
      this.initVideoWebPlugin(
        {
          containerId: "videoControl",
          width: this.videoWidth,
          height: this.videoHeight,
          layout: "1x1",
        },
        () => {
          this.startPreview(this.number);
        }
      );
    }
  },
  destroyed() {
    if (oWebControl != null) {
      oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
      oWebControl.JS_Disconnect().then(
        function() {
          // 断开与插件服务连接成功
        },
        function() {
          // 断开与插件服务连接失败
        }
      );
    }
  },
  methods: {
    formatVideoOptions(url, playType) {
      const typeMap = this.config.videoTypeMap;
      const options = {
        playType,
        sources: [
          {
            src: url,
            type: typeMap[playType],
          },
        ],
        productId: this.productId,
      };
      return options;
    },
    getData() {
      this.openFullLoading();
      this.$get("/fireFightingIOT/device/detail", {
        deviceClassify: "6",
        id: this.id,
      }).then(
        (res) => {
          this.loading = false;
          this.closeFullLoading();
          let deviceDetail = res.data;
          this.deviceDetail = deviceDetail;
          if (deviceDetail.videoplayAddr) {
            this.videoList.push(
              this.formatVideoOptions(
                deviceDetail.videoplayAddr,
                deviceDetail.playType
              )
            );
          } else if (deviceDetail.videoplayAddrList.length > 0) {
            this.videoList = deviceDetail.videoplayAddrList.map((item) => {
              return this.formatVideoOptions(item, deviceDetail.playType);
            });
          } else {
            this.getVideoStream();
          }
        },
        (err) => {
          this.closeFullLoading();
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getVideoStream() {
      this.$get("/fireFightingIOT/device/getVideoStream", {
        number: this.number,
      })
        .then((res) => {
          if (res.data) {
            this.videoList.push(
              this.formatVideoOptions(res.data, this.deviceDetail.playType)
            );
          }
        })
        .catch((err) => {
          this.$message.error(err.msg || "系统错误");
        });
    },
    startPreview(cameraIndexCode) {
      var cameraIndexCode = cameraIndexCode; //获取输入的监控点编号值，必填
      var streamMode = 0; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）

      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

      oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        }),
      });
    },
  },
};
</script>
